<template>
  <div class="UserLogin">

    <div class="main">
      <LoginPic/>
      <div class="main-bottom">
        <div class="main-bottom-login">

          <div class="main-bottom-login-code" @click="codeShow" :style="{backgroundColor:code ? '#fff' : ''}">
            扫码登录
          </div>
          <div class="main-bottom-login-password" @click="passwordShow"
               :style="{backgroundColor:password ? '#fff' : ''}">
            账号登录
          </div>
          <div class="main-bottom-login-note" @click="noteShow"
               :style="{backgroundColor:note ? '#fff' : ''}">
            短信登录
          </div>

        </div>

        <div class="main-bottom-form">

          <div class="code" :style="{display:code ? 'block' : 'none'}">
            <img alt="codeImg" :src="codeImg">
            <div>
              <a href="javascript:void (0)" @click="register">还没有账号？去注册一个</a>
            </div>
          </div>

          <div class="password" :style="{display:password ? 'block' : 'none'}" @keyup.enter="passwordLogin">
            <form action="#" method="post" ref="loginRef">
              <label>
                <input type="text" name="username" id="username" v-model="passwordUser.username"
                       placeholder="请输入账户/邮箱">
              </label>
              <label>
                <input type="password" name="password" v-model="passwordUser.password" placeholder="请输入密码">
              </label>
              <button type="button" @click="passwordLogin">登录</button>
              <div>
                <a href="javascript:void (0)" @click="register">还没有账号？去注册一个</a>
              </div>
            </form>
          </div>

          <div class="note" :style="{display:note ? 'block' :'none'}" @keyup.enter="noteLogin">
            <form action="#" method="post" ref="noteRef">
              <label>
                <input type="text" name="telephone" id="telephone" v-model="noteUser.email"
                       placeholder="请输入邮箱">
              </label>
              <label class="note-validCode">
                <input type="text" name="validCode" id="validCode" v-model="noteUser.code" placeholder="验证码">
              </label>
              <button type="button" id="validCodeBtn" @click="timeClick"><span id="span1"
                                                                               :style="{display:span1 ? 'block' : 'none'}">获取验证码</span><span
                id="span2" disabled
                :style="{display:span2 ? 'block' : 'none'}">{{ countdownText }}</span>
              </button>
              <button type="button" id="note-login" :disabled="noteBtn" @click="noteLogin">
                登录
              </button>
              <br/>

              <div class="note-text">
                <label>
                  <input type="checkbox" id="checkbox" @change="checkTOrF" v-model="checkBox"
                         style="height: 16px;width: 16px">
                </label>
                <span style="width: 500px">
                  未注册邮箱登录时会自动创建新账户，我已阅读并同意<a href="#">服务协议</a>和<a href="#">隐私条款</a>
                </span>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginPic from "@/views/login/loginpic/LoginPic.vue";

export default {
  name: "UserLogon",
  components: {LoginPic},
  data() {
    return {
      code: true,
      password: false,
      note: false,
      span1: true,
      span2: false,
      noteBtn: true,
      countdown: null,
      checkBox: false,
      codeImg: require("../../assets/code.png"),
      initialCountdownSeconds: 60,
      countdownText: '',
      passwordUser: {
        username: '',
        password: ''
      },
      noteUser: {
        email: '',
        code: ''
      }
    }
  }, methods: {
    register() {
      this.code = false
      this.password = false
      this.note = true
    },
    checkTOrF() {
      this.noteBtn = !this.noteBtn
    },
    codeShow() {
      this.code = true
      this.password = false
      this.note = false
      this.beforeDestroy()
    },
    passwordShow() {
      this.code = false
      this.password = true
      this.note = false
      this.beforeDestroy()
    },
    noteShow() {
      this.code = false
      this.password = false
      this.note = true
    },
    async passwordLogin() {
      const username = this.passwordUser.username.trim()
      const password = this.passwordUser.password.trim()
      if (username === "" || username === null) {
        this.$message.error("请输入账户或者邮箱！")
      } else if (password === "" || password === null) {
        this.$message.error("请输入密码！")
      } else {
        // 验证通过
        await this.$request.post('/user/login', this.passwordUser).then(res => {
          if (res.code === 200) {
            sessionStorage.setItem('user-key', JSON.stringify(res.data))
            this.$router.push('/index')
            this.$message.success('登录成功')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.$message.error('网络错误')
        })
      }
    },
    noteLogin() {
      const telephone = this.noteUser.email.trim()
      const code = this.noteUser.code.trim()
      if (telephone === "" || telephone === null) {
        alert("请输入邮箱！")
      } else if (code === "" || code === null) {
        alert("请输入验证码！")
      } else {
        this.$request.post('/user/register', this.noteUser).then(res => {
          if (res.code === 200) {
            this.$router.push('/index')
            this.$message.success('登录成功')
            sessionStorage.setItem('user-key', JSON.stringify(res.data))
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.$message.error('网络错误')
        })
      }
    },
    timeClick() {
      const email = this.noteUser.email.trim()
      const emailRegex = /^[a-zA-Z0-9_-]+@qq\.com$/
      if (email === "" || email === null) {
        alert("请输入邮箱")
      } else if (!emailRegex.test(email)) {
        alert("邮箱格式有误")
      } else {
        this.span1 = false
        this.span2 = true
        this.startCountdown()
        // 发起请求获取验证码
        this.$request.get('/email/code', {
          params: {
            email: this.noteUser.email
          }
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('获取验证码成功')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.$message.error("网络错误")
        })
      }
    },
    startCountdown() {
      // 清除之前的倒计时（如果有的话）
      if (this.countdown) {
        clearInterval(this.countdown)
        this.countdown = null
        this.countdownText = ""
      }
      // 设置倒计时秒数为初始值
      this.countdownSeconds = this.initialCountdownSeconds
      this.countdownText = '请' + this.countdownSeconds + '秒后再试！'
      // 开始倒计时
      this.countdown = setInterval(() => {
        if (this.countdownSeconds > 0) {
          this.countdownSeconds--
          this.countdownText = '请' + this.countdownSeconds + '秒后再试！'
        } else {
          // 倒计时结束，清除计时器并设置文本
          clearInterval(this.countdown)
          this.countdownText = ""
          this.span1 = true
        }
      }, 1000)
    },
    beforeDestroy() {
      this.checkBox = false
    }
  }
}
</script>

<style scoped>
.main {
  height: 100vh;
  margin: 0 auto;
}

.main-bottom {
  width: 600px;
  height: 400px;
  margin-top: 100px;
  text-align: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 20px;
  float: right;
}

.code {
  margin-top: 20px;
}

.main-bottom-login {
  font-size: 26px;
  height: 40px;
  background-color: #f1f1f1;
  border-radius: 20px;
}

.main-bottom-login-code {
  width: 200px;
  height: 40px;
  float: left;
  cursor: pointer;
  border-radius: 20px 0 0;
}

.main-bottom-login-password {
  width: 200px;
  height: 40px;
  float: left;
  cursor: pointer;
}

.main-bottom-login-note {
  width: 200px;
  height: 40px;
  float: left;
  cursor: pointer;
  border-radius: 0 20px 0 0;
}

.password form {
  margin-top: 30px;;
}

.password form input {
  margin-top: 20px;
  border-radius: 10px;
  width: 500px;
  background-color: #ffffff;
  font-size: 26px;
  height: 50px;
}

.password form button {
  margin-top: 20px;
  border-radius: 10px;
  width: 500px;
  background-color: #4caf50;
  height: 50px;
}

.note form {
  margin-top: 30px;
}

.note form input#telephone {
  margin-top: 20px;
  width: 500px;
  height: 50px;
  background-color: #f7f7f7;
  border-radius: 10px;
  font-size: 26px;
}

.note form input#validCode {
  margin-top: 20px;
  width: 500px;
  height: 50px;
  background-color: #f7f7f7;
  border-radius: 10px;
  font-size: 26px;
}

.note form #validCodeBtn {
  margin-top: 10px;
  background-color: #ffffff;
  border: 1px solid black;
  border-radius: 5px;
  height: 45px;
  width: 120px;
}

.note form #note-login {
  margin-top: 10px;
  border-radius: 10px;
  width: 500px;
  background-color: #4caf50;
  height: 50px;
}

.note form div {
  margin: 0 auto;
}

.note form .note-text {
  width: 500px;
  margin-top: 20px;
  font-size: 16px;
  color: #b9b7b7;
}
</style>
